<template>
	<view class="page-container">
		<view class="table-view-group">
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">手机号码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="phone" placeholder="请输入手机号码" />
					</view>
					<view class="table-cell-block__fd" @click="clearPhone" :hidden="!phone">
						<text class="iconfont control-clear-icon">&#xe688;</text>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">验证码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="imgCode" placeholder="图片验证码" />
					</view>
					<view class="table-cell-block__fd">
						<image :src="imgCodeInfo.pic" mode="scaleToFill" style=" width: 120rpx; height: 60rpx;" @click="getImgCode"></image>
					</view>
				</view>
			</view>
			<view class="table-cell-bar">
				<view class="table-cell-block">
					<view class="table-cell-block__hd">短信验证码</view>
					<view class="table-cell-block__bd">
						<input class="item-input" type="text" v-model="code" placeholder="请输入验证码" />
					</view>
					<view class="table-cell-block__fd">
						<view class="msg-code__txt" v-if="isSend">{{countDown}}秒后重新发送</view>
						<view class="msg-code__send" v-else @click="getDynCode">获取动态密码</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="['save-btn-block', isCheckEmpty ? '' : 'disabled']" :disabled="!isCheckEmpty" @click="submitBind">绑定</view>
	</view>
</template>

<script>
	import {check_phone, check_email} from '@/utils/utils.js'
	export default {
		data() {
			return {
				phone: '',
				code: '',
				isSend: false,
				countDown: 119,
				imgCodeInfo:{},
				imgCode:''
			}
		},
		computed: {
			isCheckEmpty(){
				return this.phone && this.code && this.imgCode
			}
		},
		onLoad() {
			this.getImgCode();
		},
		methods: {
			// 清空手机号输入
			clearPhone(){
				this.phone = '';
			},
			// 获取验证码
			async getImgCode(){
				let getImgRes;
				let params = {
					method: "api/v2/common/get_code_image"
				}
				getImgRes = await this.$http(params);
				this.imgCodeInfo = getImgRes.data;
			},
			// 获取动态验证码
			getDynCode(){
			
				let phone = this.phone;
				let isFormat = check_phone(phone);
				// 空账号验证
				if(!phone){
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return;
				}
				
				// 账号格式验证
				if(!isFormat){
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return;
				}
				
				this.$_getRegisterCode()
			},
			// 获取注册验证码
			async $_getRegisterCode(){
				let codeRes,timer,
					params = {
						method: "api/v2/dynamic/code",
						receiver: this.phone,
						msgtype: "reg_msgcode"
					}
				codeRes = await this.$http(params);
				if(codeRes.status){
					this.isSend = true;
					timer = setInterval(() => {
						if(this.countDown > 1){
							this.countDown--
						}else{
							this.countDown = 119;
							this.isSend = false;
							clearInterval(timer)
						}
					}, 1000);
					
					uni.showToast({
						title: '验证码发送成功!',
						icon: 'none'
					})
				}else{
					uni.showToast({
						title: codeRes.msg,
						icon: 'none'
					})
				}
			},
			// 提交绑定
			submitBind(){
				let phone = this.phone;
				let isFormat = check_phone(phone);
				
				//账号格式验证
				if(!isFormat){
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return;
				}
					
				if(!this.imgCode)
				{
					uni.showToast({
						title: '请输入图片验证码',
						icon: 'none'
					})
					return;
				}
		
				if(!this.code)
				{
					uni.showToast({
						title: '请输入动态验证码',
						icon: 'none'
					})
					return;
				}
		
				this.$_submitBind()
				
			},
			// 绑定接口
			async $_submitBind(){
				let registerRes,
					params = {
						method: "api/v2/member/info/bind",
						user: this.phone,
						msg_code: this.code,
						captcha_key: this.imgCodeInfo.key,
						code: this.imgCode
					}
				registerRes = await this.$http(params);
				if(registerRes.status){
					uni.showToast({
						title: "绑定成功",
						icon: 'none'
					})
					
					let userInfo = uni.getStorageSync('userInfo');
					userInfo.phone = this.phone;
					// 重设会员信息
					uni.setStorageSync('userInfo',userInfo);
					
					// 返回上一页
					setTimeout(() => {
						uni.navigateBack({
							delta:1
						})
					}, 1500)
					
				}else{
					uni.showToast({
						title: registerRes.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 24rpx;
	}
	.table-view-group{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color;
	}
	.table-cell-bar{
		padding: 0 20rpx;
		position: relative;
		&:after{
			content: "";
			position: absolute;
			right: 20rpx;
			left: 20rpx;
			bottom: 0;
			height: 1px;
			-webkit-transform: scaleY(0.5);
			transform: scaleY(0.5);
			background-color: $uni-border-color;
		}
		&:last-child:after{
			display: none;
		}
	}
	.table-cell-block{
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		&__hd{
			flex: 0 0 auto;
			width: 180rpx;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $uni-font-size-base;
		}
		&__bd{
			flex: 1 1 auto;
		}
		&__fd{
			height: 48rpx;
			line-height: 48rpx;
			flex: 0 0 auto;
			.iconfont{
				display: inline-block;
				vertical-align: top;
				margin-left: 12rpx;
			}
		}
	}
	.save-btn-block{
		color: $uni-text-color-inverse;
		padding: 20rpx 0;
		text-align: center;
		margin-top: 40rpx;
		font-size: $uni-font-size-lg;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary;
		&:after{
			display: none;
		}
		&.disabled{
			color: $uni-text-color-inverse;
			background-color: #bdefd6;
		}
	}
	.item-input{
		height: 48rpx;
		line-height: 48rpx;
		margin-right: 30rpx;
		font-size: $uni-font-size-base;
	}
	.msg-code__send{
		color: $uni-color-primary;
		margin-left: 40rpx;
		font-size: $uni-font-size-sm;
	}
	.msg-code__txt{
		color: $uni-text-color-disable;
		margin-left: 40rpx;
		font-size: $uni-font-size-sm;
		font-family: Arial, Helvetica, sans-serif;
	}
</style>
